import React from 'react';
import styles from './FilterBox.less'
import Button from '@material-ui/core/Button';

import { makeStyles } from '@material-ui/core/styles';

import TextField from '@material-ui/core/TextField';

const filterList = [
    {
        item: '任务状态',
        itemOptions: ['全部', '待响应', '处理中', '已完成', '已超时']
    },
    {
        item: '风险级别',
        itemOptions: ['全部', '普通', '紧急', '非常紧急']
    },
    {
        item: '风险级别',
        itemOptions: ['全部', '预警', '告警']
    }
]

const DatePickerStyle = makeStyles((theme) => ({
    container: {
        display: 'flex',
        flexWrap: 'wrap',
    },
    textField: {
        marginLeft: theme.spacing(1),
        marginRight: theme.spacing(1),
        width: 200,
    },
}));


function DateAndTimePickers() {
    const DatePickerclasses = DatePickerStyle();

    return (
        <form className={DatePickerclasses.container} noValidate>
            <TextField
                id="datetime-local"
                type="datetime-local"
                defaultValue="2020-08-15T10:30"
                className={DatePickerclasses.textField}
                InputLabelProps={{
                    shrink: true,
                }}
            />
        </form>
    );
}


function ButtonGroups(props) {
    const { filterList } = props
    return (
        filterList.map((item, index) => <div key={index}>
            <span>{item.item}</span>
            <div>
                {item.itemOptions.map((option, index) => <Button
                    variant="contained" disableElevation key={option + index}>
                    {option}
                </Button>
                )}
            </div>

        </div>)
    )

}
export default class FilterBox extends React.Component {
    render() {
        return (
            <div className={styles.main}>
                <ButtonGroups filterList={filterList} />
                <div>
                    <span>派发时间</span>
                    <aside>
                        <DateAndTimePickers />
                        <DateAndTimePickers />
                    </aside>

                </div>
                <footer>
                    <Button variant="contained" className={styles.resetbtn}>重置</Button>
                    <Button variant="contained" className={styles.confirmbtn}>确定</Button>
                </footer>
            </div>
        )
    }
}